<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            color: inherit;
            text-decoration: none;
        }

        .header {
            width: 1226px;
            margin: 0px auto;
            background: grey;
            line-height: 40px;
            color: #fff;
            font-size: 12px;

            & ul {
                display: flex;

                & li {
                    padding: 0 10px;
                }

                .site-nav-info {}
            }
        }

        .container {
            width: 1226px;
            margin: 50px auto;

            .grade-list {

                & table,
                & td,
                & th {
                    border: 1px solid #333;
                }

                & table {
                    width: 100%;
                    line-height: 45px;
                    text-align: center;
                    border-collapse: collapse;
                    font-size: 13px;
                }

            }
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        a {
            text-decoration: none;
            color: inherit;
        }

        .header {
            width: 1226px;
            margin: 0 auto;
            font-size: 13px;
            line-height: 50px;
            margin-bottom: 20px;
        }

        .header .list {
            display: flex;
        }

        .header .list li {
            padding: 0 10px;
        }

        .site-nav-user {
            display: none;
        }

        .d-block {
            display: block;
        }

        .d-none {
            display: none;
        }

        .shadow {
            width: 100%;
            height: 100%;
            position: fixed;
            left: 0;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
        }

        .shadow .form {
            background-color: #f6f6f6;
            width: 250px;
            padding: 20px;
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .shadow .form .input-group {
            margin-bottom: 10px;
        }

        .shadow .form .input-group input {
            margin-left: 5px;
        }

        .shadow .form .input-group input:disabled {
            border: 0;
            color: #333;
        }

        /* 搜索 */

        .searchGrade {
            display: flex;
            margin-bottom: 10px;
            /* justify-content: space-between; */
        }

        .searchGrade>* {
            margin-right: 20px;
            line-height: 30px;
        }

        .searchGrade .searchBar {
            width: 300px;
            height: 29px;
            border: 1px solid #333;
            display: flex;
            overflow: hidden;
        }

        .searchGrade .searchBar .searchCon {
            border: none;
            outline: none;
            flex: 1;
            padding: 0;
            text-indent: 5px;
        }

        .searchGrade .searchBar .searchBtn {
            width: 60px;
            height: 30px;
            display: block;
            background-color: #999;
        }

        .searchGrade .orderColBar,
        .searchGrade .orderTypeBar {
            border: 1px dashed #999;
            padding: 0 20px;
        }

        .searchGrade label {
            margin-right: 10px;
        }

        .searchGrade select {
            height: 30px;
        }

        .searchGrade input[type="reset"] {
            height: 30px;
            width: 45px;
        }

        .pageBox {
            text-align: center;
            margin-top: 10px;
        }
    </style>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        img {
            vertical-align: top;
        }

        .goodList {
            width: 1226px;
            margin: 0 auto;
            margin-top: 50px;

            .list {
                display: flex;
                justify-content: space-between;
                flex-wrap: wrap;

                & li {
                    width: 19%;
                    font-size: 13px;
                    line-height: 24px;
                    margin-top: 10px;
                    padding: 5px;
                    box-sizing: border-box;

                    &:hover {
                        box-shadow: 0 0 4px 1px rgba(0, 0, 0, 0.5);
                    }

                    & img {
                        width: 80%;
                        display: block;
                        margin: 0 auto;
                    }
                }
            }
        }
    </style>
</head>

<body>
    <div class="header">
        <ul class="nav">
            <li>中国大陆</li>
            <li class="site-nav-sign">
                <a href="./login.html">亲，请登录</a>
                <a href="./login.html">免费注册</a>
            </li>
            <li class="site-nav-info">
                <a href="javascript:;" class="tips">欢迎,xxx</a>
                <a href="javascript:;" class="exit">退出</a>
            </li>
            <li>手机淘宝</li>
            <li>网页无障碍</li>
        </ul>
    </div>
    <div class="container">
        <!-- onsubmit="return false" 阻止表单默认提交 -->
        <form class="searchGrade" onsubmit="return false">
            <div class="searchBar">
                <input type="text" class="searchCon">
                <a href="javascript:;" class="searchBtn"></a>
            </div>
            <div class="orderColBar">
                <!-- 排序的列名  -->
                <label>默认<input type="radio" name="col" class="orderCol" value="id" checked=""></label>
                <label>名称<input type="radio" name="col" class="orderCol" value="title"></label>
                <label>价格<input type="radio" name="col" class="orderCol" value="price"></label>
            </div>
            <div class="orderTypeBar">
                <!-- 排序的方式  asc => 升序 desc => 降序-->
                <label>升序<input type="radio" name="type" class="orderType" value="asc" checked=""></label>
                <label>降序<input type="radio" name="type" class="orderType" value="desc"></label>
            </div>
            <div class="showNumSelect">
                <select class="showNum">
                    <option value="5" selected="">每页显示5条</option>
                    <option value="10">每页显示10条</option>
                    <option value="15">每页显示15条</option>
                    <option value="20">每页显示20条</option>
                </select>
            </div>
            <input type="reset" value="重置">
        </form>
        <div class="goodList">
            <ul class="list">
                <li class="list-item">
                    <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif"
                        alt="">
                    <p class="price">￥6499.00</p>
                    <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
                </li>
                <li class="list-item">
                    <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif"
                        alt="">
                    <p class="price">￥6499.00</p>
                    <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
                </li>
                <li class="list-item">
                    <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif"
                        alt="">
                    <p class="price">￥6499.00</p>
                    <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
                </li>
                <li class="list-item">
                    <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif"
                        alt="">
                    <p class="price">￥6499.00</p>
                    <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
                </li>
                <li class="list-item">
                    <img src="https://img10.360buyimg.com/n7/jfs/t1/179453/39/38407/44186/650be5cdFaf7e861a/e755769057e34026.jpg.avif"
                        alt="">
                    <p class="price">￥6499.00</p>
                    <p class="name">现货当天速发！遥遥领先华为mate60 新品手机 mate60雅丹黑（不是pro版本）</p>
                </li>
            </ul>
        </div>
    </div>

    <div class="shadow">
        <form class="showGrade form" onsubmit="return false">
            <div class="input-group"><label for="">编号:</label><input type="text" name="id" disabled></div>
            <div class="input-group"><label for="">姓名:</label><input type="text" name="name" disabled></div>
            <div class="input-group"><label for="">班级:</label><input type="text" name="class" disabled></div>
            <div class="input-group"><label for="">语文:</label><input type="text" name="chinese"></div>
            <div class="input-group"><label for="">数学:</label><input type="text" name="math"></div>
            <div class="input-group"><label for="">英语:</label><input type="text" name="english"></div>
            <div class="input-group">
                <input type="button" class="save" value="保存">
                <input type="reset" class="cancel" value="取消">
            </div>
        </form>
    </div>
</body>

<script type="module">
    import { getCookie, deleteCookie } from "../js/cookie.js"
    import { ajaxPromise } from "../js/ajax.js"

    var tbody = document.querySelector(".grade-list table tbody");

    var siteNavSign = document.querySelector(".site-nav-sign");
    var siteNavInfo = document.querySelector(".site-nav-info");

    var searchGrade = document.querySelector(".searchGrade");
    var showNumSel = document.querySelector(".showNum");
    var shadow = document.querySelector(".shadow");

    var ul = document.querySelector(".goodList .list");





    // 全局变量  => 记录搜索的参数
    var wd = ""; // 搜索关键词(默认查询所有)
    var col = "id";// 排序列名(默认按编号排序)
    var type = "asc"; // 排序方式(默认升序   desc:降序)
    var page = 1;  // 展示的页面(默认第一页)
    var size = 20;  // 每页展示多少条 


    // 判断用户是否登陆
    var lgc = getCookie("lgc");
    if (lgc) {
        var tips = document.querySelector(".site-nav-info .tips");
        var exit = document.querySelector(".site-nav-info .exit");

        tips.textContent = `欢迎您,${lgc}`;

        exit.onclick = function () {
            deleteCookie("lgc");
            location.reload(); // 退出刷新
        }

        siteNavSign.remove();
    } else {
        siteNavInfo.remove();
    }


    // 页面加载时 查询成绩 排序和分页
    loadGrade();


    searchGrade.onclick = function (e) {
        var e = e || window.event;
        var target = e.target;

        if (target.className == "searchBtn") {
            var searchConInp = target.previousElementSibling;
            wd = searchConInp.value;
            loadGrade();

        } else if (target.className == "orderCol") { // 单机单选 => 获取选中时的value值
            col = target.value;
            loadGrade();
        } else if (target.className == "orderType") { // 单机单选 => 获取选中时的value值
            type = target.value;
            loadGrade();
        } else if (target.type == "reset") {

            wd = ""; // 搜索关键词(默认查询所有)
            col = "id";// 排序列名(默认按编号排序)
            type = "asc"; // 排序方式(默认升序   desc:降序)
            page = 1;  // 展示的页面(默认第一页)
            size = 5;  // 每页展示多少条 
            loadGrade();

        }
    }

    showNumSel.onchange = function () {
        size = this.value;
        loadGrade();
    }



    async function loadGrade() {
        ajaxPromise({
            type: "get",
            url: "/goods/search",
            data: {
                wd,
                col,
                type,
                page,
                size,
            },
            dataType: "json",
        }).then((res) => {
            var { code, message, list } = res;
            console.log(res);

            if (code == 200) {
                var html = "";
                list.forEach(({ id, title, price, img }) => {
                    html += ` <li class="list-item">
                    <a href="./detail.html?gid=${id}">
                        <img src="${img}" alt="">
                        <p class="price">￥${price}</p>
                        <p class="name">${title}</p>
                    </a>   
                </li>`
                })
                ul.innerHTML = html;


            }
        }).catch((err) => {
            // throw err;
        })
    }



</script>

</html>